<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .current {
                color: orange;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <fruit-list :list="list">
                <template slot-scope="slotProps">
                    <strong v-if="slotProps.info.id == 2" class="current">
                        {{slotProps.info.name}} ---- {{slotProps.index}}
                    </strong>
                    <span v-else>{{slotProps.info.name}} ---- {{slotProps.index}}</span>
                </template>
            </fruit-list>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            Vue.component('fruit-list', {
                props: ['list'],
                template: `
                <div>
                    <li :key="item.id" v-for="item in list">
                        <slot :info="item" :index="item.id">
                        {{item.name}}
                        </slot>
                    </li>
                </div>
                `
            });
            var app = new Vue({
                el: '#app',
                data: {
                    list: [
                        {
                            id: 1,
                            name: 'apple'
                        },
                        {
                            id: 2,
                            name: 'orange'
                        },
                        {
                            id: 3,
                            name: 'banana'
                        }
                    ]
                }
            });
        </script>
    </body>
</html>
